@import "reset.scss";


.swiper{
    @include container();
    margin-bottom: 26px;

    .home-hero{
        position: relative;
        overflow: hidden;

        .swiper-container{
            width: max-content;
            position: relative;
            overflow: hidden;

            li{
                /* width: 25%; */
                width: 1226px;
                float: left;

                img{
                    width: 100%;
                }
            }
        }
        .swiper-nav{
            position: absolute;
            top: 0;
            left: 0;
            width: 234px;
            height: 460px;
            background-color: rgba(105,101,101,.6);
            color: #fff;

            ul{
                padding: 20px 0;
                height: 420px;
                display: flex;
                flex-direction: column;

                li{
                    flex: 1;
                    line-height: 42px;
                    padding-left: 30px;
                    display: block;
                    position: relative;

                    &:hover{
                        background-color: #ff6700;
                    }
                    .iconfont-arrow{
                        position: absolute;
                        top: 12px;
                        right: 20px;
                        font-size: 16px;
                        line-height: 16px;
                        color: #e0e0e0;
                    }
                }
            }
        }
        .swiper-pagination{
            position: absolute;
            width: 400px;
            left: auto;
            right: 30px;
            bottom: 20px;
            text-align: right;

            .swiper-pagination-bullet{
                width: 8px;
                height: 8px;
                display: inline-block;
                border: 2px solid #fff;
                border-color: hsla(0, 0%, 100%, .3);
                border-radius: 10px;
                overflow: hidden;
                background: rgba(0,0,0,.4);
                opacity: 0.8;

                &:hover{
                    background: hsla(0,0%,100%,.4);
                    border-color: rgba(0,0,0,.4);
                }
            }
            .swiper-pagination-bullet-active{
                background: hsla(0,0%,100%,.4);
                border-color: rgba(0,0,0,.4);
            }
        }
        .swiper-button-prev{
            position: absolute;
            top: 50%;
            width: 41px;
            height: 69px;
            margin-top: -35px;
            left: 234px;
            background: url(../images/icon-slides.png) no-repeat -84px 50%;
            right: auto;

            &:hover{
                background: url(../images/icon-slides.png) no-repeat 0px 50%;
            }
        }
        .swiper-button-next{
            position: absolute;
            top: 50%;
            right: 0;
            width: 41px;
            height: 69px;
            margin-top: -35px;
            background: url(../images/icon-slides.png) no-repeat -125px 50%;
            left: auto;

            &:hover{
                background: url(../images/icon-slides.png) no-repeat -42px 50%;
            }
        }
    }
    .swiper-row{
        margin-top: 14px;

        .span4{
            width: 234px;
            float: left;
            // margin-left: 14px;

            ul{
                padding: 3px;
                font-size: 12px;
                text-align: center;
                background-color: #5f5750;

                li{
                    position: relative;
                    float: left;
                    width: 70px;
                    height: 82px;
                    padding: 0 3px;

                    &::before{
                        top: -1px;
                        left: 6px;
                        width: 64px;
                        height: 1px;
                    }
                    &::after{
                        top: 6px;
                        left: 0;
                        width: 1px;
                        height: 70px;
                    }
                    &::before,&::after{
                        position: absolute;
                        content: "";
                        background: #665e57;
                    }
                    

                    a{
                        display: block;
                        padding-top: 18px;
                        text-overflow: ellipsis;
                        color: #fff;
                        opacity: .7;

                        &:hover{
                            opacity: 1;
                        }
                        img{
                            display: block;
                            width: 24px;
                            height: 24px;
                            margin: 0 auto 4px;
                        }
                    }
                }
            }
        }
        .span16{
            width: 978px;
            float: left;
            margin-left: 14px;
            min-height: 1px;

            .home-promo-list{

                li{
                    float: left;
                    width: 316px;
                    height: 170px;
                    transition: all .2s linear;

                    &:hover{
                        @include liShadow();
                    }

                    a{
                        display: block;
                        height: 170px;

                        img{
                            display: block;
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
                li+li{
                    margin-left: 15px;
                }
            }
        }
    }
}